<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 20px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }

        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>教练个人资料</title>
</head>
<body>
<div id="app">
    <el-container>
        <!--头像部分-->
        <el-tooltip class="item" effect="dark" content="点击头像进行修改" placement="right-start">
            <el-upload
                    class="avatar-uploader"
                    action="/account/fileUpload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="userInfo.image" :src="userInfo.image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-tooltip>
        <!--表单部分-->
        <div style="margin: 50px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="userInfo">
            <el-form-item label="用户名">
                <el-input v-model="userInfo.username" :disabled="!use"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="userInfo.nickname" :disabled="!use"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="userInfo.email" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="手机">
                <el-input v-model="userInfo.phone" :disabled="!use"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio v-model="userInfo.gender" label="男" :disabled="!use">男</el-radio>
                <el-radio v-model="userInfo.gender" label="女" :disabled="!use">女</el-radio>
                <!--                <el-input v-model="userInfo.gender" :disabled="!use"></el-input>-->
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="userInfo.age" :disabled="!use"></el-input>
            </el-form-item>

            <el-form-item label="真实姓名">
                <el-input v-model="userInfo.realname" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="流派">
                <el-select v-model="userInfo.style" placeholder="选择流派">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="个人介绍">
                <el-input v-model="userInfo.introduce" :disabled="!use"></el-input>
            </el-form-item>
            <el-form-item label="所属场馆">
                <el-input v-model="userInfo.venueName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="changeUse()" v-show="!use">修改</el-button>
                <el-button type="primary" v-show="use" @click="submitInfo()">提交</el-button>
            </el-form-item>
        </el-form>
    </el-container>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                userInfo: {
                    accountId: "",// 不展示
                    username: "",
                    nickname: "",
                    email: "",
                    phone: "",
                    gender: "男",
                    age: "",
                    image: "https://silas103.oss-cn-chengdu.aliyuncs.com/default.png",// 默认头像
                    balance: "",// 不展示
                    coachId: "",
                    realname: "",
                    style: "",
                    introduce: "",
                    venueName: "",
                },
                use: false,
                labelPosition: "left",
                options: [
                    {value: '印式瑜伽', label: '印式瑜伽'},
                    {value: '泰式瑜伽', label: '泰式瑜伽'},
                    {value: '中式瑜伽', label: '中式瑜伽'},
                    {value: '其他', label: '其他'}
                ],

            }
        },
        methods: {
            // 加载用户所有信息
            query() {
                axios.get("/account/getMyInfo").then(resp => {
                    if (resp.data.code === resp.status) {
                        this.userInfo = resp.data.data
                        this.userInfo.image = "https://silas103.oss-cn-chengdu.aliyuncs.com/" + this.userInfo.image
                    }
                })
            },
            handleAvatarSuccess(res, file) {
                this.$message({
                    message: '上传成功',
                    type: 'success'
                });
                this.userInfo.image = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === "image/png" || file.type === "image/gif";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!(isJPG)) {
                    this.$message.error('图片格式只能是JPG、PNG或GIF');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            changeUse() {
                this.use = true
            },
            submitInfo() {
                axios.post("/account/modifyCoach", this.userInfo).then(resp => {
                    if (resp.data.code === resp.status) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.userInfo = resp.data.data
                        this.userInfo.image = "https://silas103.oss-cn-chengdu.aliyuncs.com/" + this.userInfo.image
                        this.use = false
                    }
                })
            }
        },
        created() {
            this.query()
        }
    })
</script>
</body>
</html>